<script setup lang="ts">

import IconHome from "@/components/icons/IconHome.vue";
import IconUserManage from "@/components/icons/IconUserManage.vue";
import IconUser from "@/components/icons/IconUser.vue";
import IconRole from "@/components/icons/IconRole.vue";
import IconGameManage from "@/components/icons/IconGameManage.vue";
import IconGame from "@/components/icons/IconGame.vue";
import IconGameService from "@/components/icons/IconGameService.vue";
import router from "@/router";


const activePath = () => {
  let curRoute = router.currentRoute.value
  if (curRoute.matched.length > 2) {
    return curRoute.matched[2].path
  } else if (curRoute.matched.length > 1) {
    return curRoute.matched[1].path
  } else {
    return curRoute.path
  }
}

</script>

<template>
  <div class="admin">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activePath()" mode="vertical" :router="true" :collapse="false">
          <el-menu-item index="/admin/home">
            <el-icon>
              <icon-home></icon-home>
            </el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="/admin/user">
            <template #title>
              <el-icon>
                <icon-user-manage></icon-user-manage>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/user/user">
              <el-icon>
                <icon-user></icon-user>
              </el-icon>
              <template #title>用户</template>
            </el-menu-item>
            <el-menu-item index="/admin/user/role">
              <el-icon>
                <icon-role></icon-role>
              </el-icon>
              <template #title>角色</template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/admin/game">
            <template #title>
              <el-icon>
                <icon-game-manage></icon-game-manage>
              </el-icon>
              <span>游戏管理</span>
            </template>
            <el-menu-item index="/admin/game/game">
              <el-icon>
                <icon-game></icon-game>
              </el-icon>
              <template #title>子游戏</template>
            </el-menu-item>
            <el-menu-item index="/admin/game/service">
              <el-icon>
                <icon-game-service></icon-game-service>
              </el-icon>
              <template #title>游戏服</template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="less">
.admin .el-main {
  padding: 0 0 0 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>